<template>
  <div class="page page-home has-headbar">
    <van-nav-bar
      fixed
      title=""
      :z-index="100"
      left-text="运动嘉"
      right-text=""
      @click-left="onClickLeft"
      @click-right="onClickRight">
      <div slot="right">
        <span style="vertical-align: middle;margin-right: 5px;">嘉兴市</span>
        <van-icon class="location-button" name="aim" />
      </div>
    </van-nav-bar>
    <section class="banners">
      <van-swipe v-if="slides.length>0" :show-indicators="false" :autoplay="3000">
        <van-swipe-item v-for="(slide, index) in slides" :key="index">
          <a v-if="slide.url" :href="slide.url" target="_blank" class="banner-img" :style="{backgroundImage:`url(${slide.imageUrl}`}"></a>
          <router-link class="banner-img" :to="{name: 'news-detail', params:{id: slide.newsID}}" :style="{backgroundImage:`url(${slide.imageUrl}`}"></router-link>
        </van-swipe-item>
      </van-swipe>
      <!-- <swiper :options="swiperOption" ref="bannerSwiper"  v-if="slides.length>0">
        <swiper-slide v-for="(slide, index) in slides" :key="index">
          <a v-if="slide.url" :href="slide.url" class="banner-img" :style="{backgroundImage:`url(${slide.imageUrl}`}"></a>
          <router-link class="banner-img" :to="{name: 'news-detail', params:{id: slide.newsID}}" :style="{backgroundImage:`url(${slide.imageUrl}`}"></router-link>
        </swiper-slide>
      </swiper> -->
    </section>
    <section class="menu-list">
      <div class="menu-list-inner">
        <template v-for="(item, index) in menus">
          <router-link  :key="index"  v-if="!item.url" class="menu-item" :to="{name: item.route}">
            <div class="icon-box"><img :src="item.icon" :alt="item.name"></div>
            <div class="name">{{item.name}}</div>
          </router-link>
          <a v-else  :key="index"  :href="item.url" target="_blank" class="menu-item">
            <div class="icon-box"><img :src="item.icon" :alt="item.name"></div>
            <div class="name">{{item.name}}</div>
          </a>
        </template>
      </div>
    </section>
    <section class="news">
      <div class="section-title">
        推荐新闻
      </div>
      <div class="list">
        <template v-for="(item, index) in news">
          <router-link v-if="!item.url.trim()" :to="{name: 'news-detail', params:{id: item.newsID}}" class="item" :key="index" >
            <div class="cover" :style="{backgroundImage:`url(${item.imageUrl})`}"></div>
            <div class="content-box">
              <h3 class="title">{{item.title}}</h3>
              <div class="content">{{item.content}}</div>
              <div class="info">{{item.create_at | formateDate}}</div>
            </div>
          </router-link>
          <a v-else class="item" :key="index" :href="item.url">
            <div class="cover" :style="{backgroundImage:`url(${item.imageUrl})`}"></div>
            <div class="content-box">
              <h3 class="title">{{item.title}}</h3>
              <div class="content">{{item.content}}</div>
              <div class="info">{{item.create_at | formateDate}}</div>
            </div>
          </a>
        </template>
        <empty-data :empty="news.length === 0" :loading="newsLoading"></empty-data>
      </div>
    </section>
  </div>
</template>

<script>
// import 'swiper/dist/css/swiper.css'
// import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { Swipe, SwipeItem } from 'vant'
import dayjs from 'dayjs'
import { API_RECOMMEND_NEWS, API_BANNER_NEWS } from '@/service/news'
import { wxjsdkMixin } from '@/components/mixins'
import { getWechatLink } from '@/libs/utils'
export default {
  mixins: [wxjsdkMixin],
  name: 'home',
  inject: ['mapGetLocation'],
  components: {
    // swiper,
    // swiperSlide,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem
  },
  data () {
    return {
      swiperOption: {
        autoplay: true,
        loop: true,
        disableOnInteraction: false,
        effect: 'coverflow',
        slidesPerView: 1,
        centeredSlides: true,
        coverflowEffect: {
          rotate: 20,
          stretch: 18,
          depth: 35,
          modifier: 2,
          slideShadows: false
        }
      },
      newsLoading: false,
      slides: [],
      menus: [
        { icon: require('@/assets/images/menus/menu_15fit.png'), name: '15分钟健身圈', route: 'fit-map' },
        { icon: require('@/assets/images/menus/menu_stadium_appoint.png'), name: '场馆预定', route: 'stadium-home' },
        { icon: require('@/assets/images/menus/menu_course.png'), name: '精品培训', route: 'train-home' },
        { icon: require('@/assets/images/menus/menu_activity.png'), name: '赛事活动', route: '', url: 'http://web.allelink.com.cn/jx_sport_mobile/?from=singlemessage&isappinstalled=0#/' },
        { icon: require('@/assets/images/menus/menu_organization.png'), name: '协会组织', route: 'association-list' },
        // { icon: require('@/assets/images/menus/menu_sport_circle.png'), name: '运动圈', route: 'social-list' },
        { icon: require('@/assets/images/menus/menu_run.png'), name: '最多跑一次', route: '', url: 'http://www.zjzwfw.gov.cn/zjzw/item/list/sp_index.do?webId=40&deptid=001008004008023' },
        // { icon: require('@/assets/images/menus/menu_body.png'), name: '体质监测', route: 'healthy-map' },
        // { icon: require('@/assets/images/menus/menu_heart.png'), name: '市民心声', route: 'voice-list' },
        // { icon: require('@/assets/images/menus/menu_news.png'), name: '新闻中心', route: 'news-list' },
        { icon: require('@/assets/images/menus/menu_live.png'), name: '体育直播', route: 'live-list' },
        { icon: require('@/assets/images/menus/menu_personal.png'), name: '个人中心', route: 'user-home' },
        { icon: require('@/assets/images/menus/menu_jiushengyuan.png'), name: '游泳救生员培训', route: '', url: 'http://web.allelink.com.cn/jx_sport_regist_mobile/auth.php' },
        { icon: require('@/assets/images/menus/menu_swim_card.png'), name: '游泳健康承诺卡', route: '', url: 'http://web.allelink.com.cn/jx_sport_regist_mobile/#/HealthCard' }
        // { icon: require('@/assets/images/menus/menu_yundongxiuxian.png'), name: '运动休闲体验游', route: '', url: '' }
      ],
      news: []
    }
  },
  filters: {
    formateDate (time) {
      return dayjs(dayjs.unix(time)).format('YYYY-M-D')
    }
  },
  mounted () {
    this.getData().then(() => {
      let shareInfo = {
        title: '运动嘉', // 分享标题
        desc: '',
        link: getWechatLink(window.location.hash), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: require('@/assets/images/logo.png'), // 分享图标
        success: function () {
          console.log('分享', getWechatLink(window.location.hash))
        }
      }
      this.wechatShare(shareInfo)
    })
    this.wechatShowMenu()
  },
  methods: {
    getData () {
      return API_BANNER_NEWS({ pageNumber: 1, pageSize: 5 }).then((resData) => {
        this.slides = resData.list
        this.recommendNews()
      })
    },
    onClickLeft () {},
    onClickRight () {
      this.mapGetLocation()
    },
    recommendNews () {
      this.newsLoading = true
      API_RECOMMEND_NEWS().then((resData) => {
        this.news = resData.list
      }).finally(() => {
        this.newsLoading = false
      })
    }
  }
}

</script>
<style lang="less">
.page-home{
  .banners{
    height: 298/2px;
    padding-top: 10px;
    margin-bottom: 20px;
    position: relative;
    .swiper-container{
      height: 100%;
    }
    .van-swipe{
      height: 100%;
    }
  }
  .banner-img{
    display: block;
    width: percentage(690/750);
    height: 298/2px;
    margin:0 auto;
    border-radius: 6px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.1);
  }
  .menu-list{
    padding: 5px;
  }
  .menu-list-inner{
    flex-wrap: wrap;
  }
  .menu-item{
    width: 25%;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 35/2px;

    .icon-box{
      // width: 98/2px;
      height: 98/2px;
      img{
        display: block;
        height: 100%;
        // width: 100%;
      }
    }
    .name{
      text-align: center;
      font-size: 11px;
      color: #414141;
      line-height: 1;
      margin-top: 12px;
    }
  }
  .news{
    margin-top: 12px;

    .list{
      padding: 0 2px;
      margin-top: 10px;
      overflow: hidden;
      .item{
        display: flex;
        align-items: center;
        box-shadow: 0px 0px 17.64px 0.36/2px rgba(44, 44, 44, 0.09);
        border-radius: 5px;
        margin: 12px 0;
        padding: 8px;

        .cover{
          width: 209/2px;
          height: 139/2px;
          flex: 0 0 209/2px;
          background-repeat: no-repeat;
          background-position: center center;
          background-size: cover;
        }
        .content-box{
          flex: 1;
          width: 0;
          margin-left: 12px;
        }
        .title {
          font-size: 28/2px;
          line-height: 23px;
          color: #353434;
          margin: 0;
          .text-overflow();
        }
        .content,.info {
          font-size: 22/2px;
          color: #484848;
          line-height: 14px;
        }
        .content{
          .line-overflow(2);

          margin-top: 5px;
          margin-bottom: 5px;
        }
      }
    }
  }
}
</style>
